<template>
  <el-form label-width="80px" ref="form">
    <el-form-item label="SUP名称"> {{ spu.spuName }} </el-form-item>
    <el-form-item label="SKU名称">
      <el-input type="text" v-model="skuForm.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input type="number" v-model="skuForm.price"></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input type="number" v-model="skuForm.weight"></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input
        type="textarea"
        rows="5"
        placeholder="产品描述"
        v-model="skuForm.skuDesc"
      ></el-input>
    </el-form-item>
    <!-- 平台属性 -->

    <el-form-item label="平台属性" :data="attrList">
      <el-form :inline="true" label-width="80px">
        <el-form-item
          :label="attr.attrName"
          v-for="(attr, index) in attrList"
          :key="attr.id"
        >
          <el-select placeholder="请选择" v-model="attr.attrIdAneValueId">
            <el-option
              :label="attrValue.valueName"
              :value="`${attr.id}:${attrValue.id}`"
              v-for="(attrValue, index) in attr.attrValueList"
              :key="attrValue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="销售属性">
      <el-form :inline="true" ref="form" label-width="80px">
        <el-form-item
          :label="saleAttr.saleAttrName"
          v-for="(saleAttr, index) in saleList"
          :key="saleAttr.id"
        >
          <el-select v-model="saleAttr.idAndValueId" placeholder="请选择">
            <el-option
              :label="saleAttrValue.saleAttrValueName"
              :value="`${saleAttr.id}:${saleAttrValue.id}`"
              v-for="(saleAttrValue, index) in saleAttr.spuSaleAttrValueList"
              :key="saleAttrValue.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>

    <el-form-item label="图片列表">
      <el-table
        style="width: 100%"
        border
        :data="imgList"
        @selection-change="handler"
      >
        <el-table-column type="selection" width="80"> </el-table-column>
        <el-table-column label="图片" width="width">
          <template slot-scope="{ row, $index }">
            <img :src="row.imgUrl" alt="" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称" width="width">
        </el-table-column>
        <el-table-column label="操作" width="width">
          <template slot-scope="{ row, $index }">
            <el-button
              type="primary"
              v-if="row.isDefault == 0"
              @click="setDefault(row)"
              >设置默认</el-button
            >
            <el-button v-else type="info">默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addSku">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "SkuForm",
  data() {
    return {
      //   平台属性
      attrList: [],
      //  销售属性
      saleList: [],
      // 图片列表
      imgList: [],
      // 存储spu--父组件
      spu: {},
      //将来携带给服务器的参数
      skuForm: {
        category3Id: "", //父组件给与的数据
        spuId: "", //某一个类的ID
        tmId: "", //品牌的ID
        skuName: "", //v-model收集的,类的实例的名字
        price: "", //价格
        weight: "", //重量
        skuDesc: "", //实例的描述
        skuDefaultImg: "",
        skuAttrValueList: [
          //收集平台属性的
          // {
          //   attrId: 0, //平台属性的ID
          //   valueId: 0, //平台属性值的ID
          // },
        ],

        skuImageList: [
          // {
          //   imgName: "string",
          //   imgUrl: "string",
          // },
        ],

        skuSaleAttrValueList: [
          //销售属性
          // {
          //   saleAttrId: 0,
          //   saleAttrValueId: 0,
          // },
        ],
      },
    };
  },
  methods: {
    //   sku的方法,用来发请求的
    async initData(category1Id, category2Id, spu) {
      //保存spu
      this.spu = spu;
      // 父组件传递过来的参数进行收集
      this.skuForm.category3Id = spu.category3Id;
      this.skuForm.spuId = spu.id;
      this.skuForm.tmId = spu.tmId;
      // 某一个类的平台属性
      let Promise1 = this.$ajax.spu.reqAttrList(
        category1Id,
        category2Id,
        spu.category3Id
      );
      //   某一个类的销售属性
      let Promise2 = this.$ajax.spu.reqSaleAttrLists(spu.id);
      // 获取某一个类的图片列表的数据
      let Promise3 = this.$ajax.spu.reqSpuImageList(spu.id);
      // promise.all
      let result = await Promise.all([Promise1, Promise2, Promise3]);
      this.attrList = result[0].data;
      console.log(this.attrList);
      this.saleList = result[1].data;
      // 服务器返回的数据中没有办法去判断:是哪个按钮
      // 在服务器中添加一个新的属性(响应式的)用来控制这两个按钮的显示与隐藏--isDefault
      this.imgList = result[2].data;
      // 进行替换
      this.imgList = this.imgList.map((item) => {
        return {
          ...item,
          isDefault: 0,
        };
      });
    },
    // 设置默认,收集默认图片的回调
    setDefault(row) {
      // 数据全部归0
      this.imgList.forEach((item) => {
        item.isDefault = 0;
      });
      row.isDefault = 1;
      // 收集默认图片的地址
      this.skuForm.skuDefaultImg = row.imgUrl;
    },
    // table的事件会掉钩子
    handler(params) {
      this.skuForm.skuImageList = params;
    },
    // 保存按钮的回调
   async addSku(){
      // 整理参数:最终参数给服务器,给服务器携带参数skuForm
      // 平台属性
      this.skuForm.skuAttrValueList=this.attrList.reduce((a,b)=>{
          if (b.attrIdAndValueId) {
            let [attrId,valueId]=b.attrIdAndValueId.spilt(':');
            let newObj={attrId,valueId}
            a.push(newObj)
          }
          return a;
      },[]);
      // 销售属性
      this.skuForm.skuSaleAttrValueList=this.saleList.reduce((a,b)=>{
        if (b.idAndValueId) {
          let [saleAttrId,saleAttrValueId]= b.idAndValueId.split(":");
          let newObj={saleAttrId,saleAttrValueId}
          a.push(newObj)
        }
        return a;
      },[]);
      // 发请求
      try {
        // 添加SKU请求
       await this.$ajax.spu.reqAddSku(this.skuForm)

      // 切换场景
      this.$emit('changeScene',{scene:0,flag:''})
      // 清空数据
      Object.assign(this._data,this.$options.data());
      } catch (error) {
      }
    },
    // 取消按钮
    cancel() {
      // 触发自定义事件
      this.$emit("changeScene", { scene: 0, flag: "" });
      // 清空数据
      Object.assign(this._data,this.$options.data());
    },

  },
};
</script>

<style>
</style>